//
// Select
// --------------------------------------------------

.select-wrapper {
    width: 200px;
}

.select-trigger-single,
.select-trigger-multi {
    position: relative;
    width: 100%;
    min-height: @input-height;
    border: 1px solid @border-color-base;

    &.focus {
        border-color: darken(@border-color-base, 18%);
    }
    &.disabled {
        background-color: #efefef;
        color: @text-color-lighter;
        cursor: @cursor-disabled;
    }
    &.required {
        border-color: @color-warning;
    }
    &.error {
        border-color: @color-danger;
    }
    > .placeholder {
        color: @text-color-lighter;
    }
}

.select-trigger-single {
    padding: 0 20px 0 @input-padding-horizonal;
    line-height: @input-height - 2;

    > .caret-up,
    > .caret-down {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 20px;
        cursor: pointer;
    }
    &.disabled > .caret-up,
    &.disabled > .caret-down {
        cursor: @cursor-disabled;
    }
    b {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 0;
        height: 0;
        border-style: solid;
    }
    > .caret-up > b {
        border-color: transparent transparent @text-color-light;
        border-width: 0 4px 6px;
    }
    > .caret-down > b {
        border-color: @text-color-light transparent transparent;
        border-width: 6px 4px 0;
    }
    &.disabled b {
        border-color: @text-color-lighter transparent transparent;
    }
}

.select-trigger-multi {
    padding: 0 4px 0 8px;

    > .placeholder {
        display: inline-block;
        height: @input-height - 2;
        line-height: @input-height - 2;
    }
    > ul {
        padding-bottom: 4px;

        > li {
            display: inline-block;
            line-height: 24px;
            margin: 4px 4px 0 0;
            padding: 0px 4px;
            border: 1px solid @border-color-base;
            border-radius: 2px;
            background-color: #eee;
            cursor: pointer;

            > i {
                margin-left: 4px;
                color: #757575;
            }
        }
    }
}

.select-dropdown {
    padding: 10px 0;
    max-height: 288px;

    .select-option {
        display: block;
        padding: 7px 18px;
        white-space: nowrap;
        cursor: pointer;

        &.hover {
            background-color: #e0e0e0;
        }
        &.selected {
            color: @primary-color;
        }
        &.disabled {
            color: @text-color-lighter;
            cursor: @cursor-disabled;
        }
        &.group-label {
            font-weight: bold;
            cursor: default;
        }
        &.group-option {
            padding: 0 30px;
        }
    }
}